<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%  // 通过request获取相关资源信息，拼凑成完整的访问路径
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
            request.getServerPort() + request.getContextPath() + "/";
%>
<html>
<head>
    <title>XML异步数据加载</title>
    <base href="<%=basePath%>">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="images/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="jquery/jquery.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.validate.min.js"></script>
    <script type="text/javascript" src="jquery/additional-methods.min.js"></script>
    <script type="text/javascript" src="jquery/Message_zh_CN.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <link href="bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        window.onload = function() {    // 动态事件绑定
            document.getElementById("loadBut").addEventListener("click", function() {
                xmlHttpRequest = new XMLHttpRequest(); // 获取Ajax操作对象
                if (xmlHttpRequest.withCredentials) {   // 当前浏览器是否支持有Ajax操作
                    alert("对不起，您的浏览器不支持Aajx处理操作！");
                } else {    // 现在支持有Ajax的处理操作
                    xmlHttpRequest.open("post", "dept.action"); // 建立通讯连接
                    xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置头信息
                    xmlHttpRequest.onload = function (env) {    // 接收响应数据
                        deptDOM = xmlHttpRequest.responseXML; // 获取XML返回的DOM对象
                        deptList = deptDOM.getElementsByTagName("dept");
                        for (x = 0; x < deptList.length; x ++) {
                            deptno = deptList[x].getElementsByTagName("deptno").item(0).firstChild.nodeValue;
                            dname = deptList[x].getElementsByTagName("dname").item(0).firstChild.nodeValue;
                            loc = deptList[x].getElementsByTagName("loc").item(0).firstChild.nodeValue;
                            trElement = document.createElement("tr");
                            trElement.setAttribute("id", "dept-" + deptno);
                            deptnoTdElement = document.createElement("td");
                            dnameTdElement = document.createElement("td");
                            locTdElement = document.createElement("td");
                            deptnoTdElement.appendChild(document.createTextNode(deptno));
                            dnameTdElement.appendChild(document.createTextNode(dname));
                            locTdElement.appendChild(document.createTextNode(loc));
                            trElement.appendChild(deptnoTdElement);
                            trElement.appendChild(dnameTdElement);
                            trElement.appendChild(locTdElement);
                            document.getElementById("deptBody").appendChild(trElement);
                        }
                    }
                    xmlHttpRequest.send(null); // 发送请求参数
                }
            }, false);
        }
    </script>
</head>
<body>
<div>&nbsp;</div>
<div class="container">
    <div class="panel panel-info">
        <div class="panel-heading">
            <strong><img src="images/logo.png" style="height: 30px;">&nbsp;Ajax异步数据交互</strong>&nbsp;&nbsp;&nbsp;
            <button class="btn btn-primary" id="loadBut">
                <span class="glyphicon glyphicon-folder-open">&nbsp;加载部门信息</span>
            </button>
        </div>
        <div class="panel-body">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr id="dept-title"><td>部门编号</td><td>部门名称</td><td>部门位置</td></tr>
                </thead>
                <tbody id="deptBody"></tbody>
            </table>
        </div>
        <div class="panel-footer">
            <div style="text-align:right;">
                <strong>沐言科技（www.yootk.com） —— 新时代软件教育领导品牌</strong>
            </div>
        </div>
    </div>
</div>
</body>
</html>
